<template>
  <div id="app">
    <div class="movie_list" v-for="article in articles">
      <mt-cell :title="article.title">
        <span>{{article.rating.average}}</span>
        <img slot="icon" :src="article.images.small">
      </mt-cell>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from './components/tabbar'
export default {
  data() {
    return {
      articles: [],
    }
  },
  components:{
    tabbar
  },
  mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {

        },
        emulateJSON: true
    }).then(function(response) {
        this.articles = response.data.subjects
    }, function(response) {
        console.log(response)
    });
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mint-cell{margin-bottom: 10px;}
</style>
